<template>
  <div>
    <el-button type="primary" @click="add"
      ><span class="mr-[5px] text-[20px]">+</span>新增</el-button
    >
    <el-table :data="tableData" border class="table">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="app_name" label="名称" width="120" />
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <div class="flex">
            <div class="detectBtn bg-[#409eff] w-[80px]" @click="pushTest(row)">
              虚拟推送
            </div>
            <div class="detectBtn bg-[#409eff] w-[50px]" @click="edit(row)">
              编辑
            </div>
            <el-popconfirm title="您确定要删除吗" @confirm="deleteData(row)">
              <template #reference>
                <div class="detectBtn bg-[#f56c6c] w-[50px]">删除</div>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="app_key" label="推送key" width="120" />
      <el-table-column prop="name" label="接收项目" width="420">
        <template #default="{ row }">
          <div class="flex text-[#409eff] justify-center flex-wrap">
            <div v-for="item in row.topics" :key="item" class="topics">
              {{
                subscription.filter(keys => {
                  if (keys.value === item) {
                    return keys.label;
                  }
                })[0].label
              }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="api_url" label="推送地址" width="400" />
      <el-table-column prop="remark" label="说明" />
    </el-table>
    <push-pop-ups
      v-if="popUpsFlag"
      @closePopUps="closePopUps"
      :subscription="subscription"
      :editData="editData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import pushPopUps from "./pushPopUps.vue";
import {
  getPushSettingsData,
  getSubscriptionList,
  deleteSubscription,
  virtualPush
} from "@/api/system";
import { optionsT, HttpPushForm } from "@/type/system";
import { ElMessage } from "element-plus";
const tableData = ref<any[]>([{}]);
const popUpsFlag = ref<boolean>(false);
const subscription = ref<optionsT[]>();
const editData = ref<HttpPushForm | null>();
const getData = async () => {
  const res = await getPushSettingsData();
  const res1 = await getSubscriptionList();
  tableData.value = res.result.items;
  subscription.value = res1.result;
};
onMounted(() => {
  getData();
});

const closePopUps = () => {
  popUpsFlag.value = false;
  getData();
};
const add = () => {
  popUpsFlag.value = true;
  editData.value = null;
};
const pushTest = async (row: HttpPushForm) => {
  const res = await virtualPush({ id: row.id });
  if (res.code === 0) {
    ElMessage({
      message: "推送成功",
      type: "success"
    });
  } else {
    ElMessage.error(res.message);
  }
};
const edit = (row: HttpPushForm) => {
  editData.value = row;
  popUpsFlag.value = true;
};
const deleteData = async (row: HttpPushForm) => {
  const res = await deleteSubscription({ ids: [row.id] });
  if (res.code === 0) {
    ElMessage({
      message: "删除成功",
      type: "success"
    });
    getData();
  } else {
    ElMessage.error(res.message);
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-table thead th {
  text-align: center;
}

::v-deep .el-table tbody td {
  text-align: center;
}

.detectBtn {
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}

.table {
  width: 100%;
  margin-top: 15px;
}

.topics {
  width: 80px;
  margin: 0 5px;
  line-height: 25px;
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 5px;
}
</style>
